<template>
  <div class="container">
    <router-view></router-view>
    <div class="index">
      <Header />
      <div class="main-center2 ">
        <div class="main-left ">
          <div class="con2">
            <div class="nav-tit">
              <div class="mleft">
                <dl class="filt"> <dd   :class="{ cur1: type == 0 }"   @click="getCatList(0,1,1,keyword)">我的分享</dd>  </dl>
              </div>
              <div class="mright fr " >
                <el-input v-model="keyword"  style="width: 223px;" class="fl search-inp"   placeholder="输入名称搜索"></el-input><el-button class="fl"  @click="getCatList(type,1,1,keyword)">搜索</el-button>
              </div>
            </div>
            <div class="clear"></div>

            <ul class="bkb-list"  v-if="listData.length>0">
              <template v-for="(item, i) in listData">
                <li>
                  <div class="act-do" style="top: 100px;">
                    <!-- <img class="s_pic" src="static/img/s_back.png" @click="share(i, item)"> -->
<!--                    <img class="s_pic" @click="downloadInfo(i, item)" src="static/img/s_download.png">
                    <img class="s_pic" @click="editInfo(i, item)" src="static/img/s_edit.png"> -->
                    <img class="s_pic" @click="delInfo(i, item)" src="static/img/s_del.png">
                  </div>
                  <img class="pic"  :src="item.image_cover" width="100%" height="130px"/>
                  <p><span class="tit tit-ellipsis" >{{item.title}}</span> </p>
                  <p><label class="   ">课件：{{item.number}}</label> </p>
                  <div style="display: flex;justify-content: space-around;">
                    <div>
                      {{item.createtime_text}}
                    </div>
                    <div v-if="item.share_type == 1" style="color: #55E4C2;">
                      全网
                    </div>
                    <div v-if="item.share_type == 2" style="color: #55E4C2;">
                      本校
                    </div>
                   <!-- <img class="pic-download fr" src="static/img/l-download.png">
                    <img class="pic-share fr" src="static/img/l-share.png" @click="share(i,item)"> -->
                  </div>
                </li>
              </template>



            </ul>
            <el-empty :image-size="200" v-else></el-empty>

            <div class="page-area" v-if="listData.length>0">
              <span type="button" class="btn-home fl" style="cursor: pointer;"
                    @click="getCatList(categoryId, current, 1,   keyword  )">首页</span>
              <el-pagination
                      background
                      layout="  prev, pager, next "
                      :current-page="currentPage"
                      :total="total"
                      :page-size="1"
                      @current-change="handleCurrentChange"
              ></el-pagination>
              <span type="button" style="cursor: pointer;" class="btn-last fr"
                    @click="getCatList(categoryId, current, total, keyword)">尾页</span>
            </div>
          </div>

        </div>
        <div class="main-right  ">



          <div class="con-menu2"  @click="goBack()">
            <div class="menu-img">
              <img src="static/img/r-back.png" alt="">
            </div>
            <div class="menu-item">
              返回
            </div>
          </div>
          <div class="con-menu2"  @click="goHome()">
            <div class="menu-img">
              <img src="static/img/r-home.png" alt="">
            </div>
            <div class="menu-item">
              首页
            </div>
          </div>


        </div>
      </div>
    </div>
    <!-- 分享 -->
    <div class=" selectChapter uploadDig" v-if="isShare == true">
      <div class="title">
        分享
        <span class="closed" @click="isShare = false"><img src="static/img/close.png" /></span>
      </div>
      <div class="cont">
        <div class="space-tj ">
          请选择分享位置
        </div>
        <ul style="height: 250px;">
          <li class="mt30">
           <el-select style="width: 100%;" v-model="group_id" placeholder="请选择">
              <el-option label="全网" value="1"></el-option>
              <el-option label="本校" value="2"></el-option>
            </el-select>
          </li>

        </ul>
        <div class="mt30 baseAct width100">
          <button class="cancel" type="info" @click="isShare = false">取消</button>
          <button @click="shareLiqr()" class="sure">确定</button>
        </div>
      </div>
    </div>


    <div class="step_task"  v-if="isOpen == true">
      <div class="do"> <img src="static/img/t-down.png" alt=""></div>
      <ul>
        <li class="loading">   正在打包备课包 <span class="fr">6年级国学课</span></li>
        <li class="ok">  正在打包备课包 <span class="fr">6年级国学课</span></li>
        <li class="loading">   正在打包备课包 <span class="fr">6年级国学课</span></li>
        <li class="ok">  正在打包备课包 <span class="fr">6年级国学课</span></li>
      </ul>
    </div>



    <!-- 下载弹出层 -->
    <div class="myDig" v-if="isDownloadBkb == true">
      <div class="title">
        提示
        <span class="closed" @click="isDownloadBkb = false"><img src="static/img/closed.png" /></span>
      </div>
      <div class="cont">
        <p class="cont-tip">请选择保存位置？</p>
        <div class="mt30 botact">
          <el-button type="info" @click="isDownloadBkb = false">取消</el-button>
          <a class="downloadBtn"  @click="isDownloadBkb = false" :href="currentDownload.zippath">保存到电脑</a>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import Header from '../../components/header.vue';
export default {
  data() {
    return {
      isOpen:false,
      isShare:false,
      group_id:"",
      itemId:"",
      total:0,
      page:1,
      page_size:9,
      current: -1,
      categoryId: '',
      currentPage: 1,
      type: 0,//0=>全部，1=>全网，2=>本校
      sort: '',
      keyword: '',
      listData:[],
      listYunData: [],
      yun: {
        total: 0,
        page: 1,
        page_size: 9,
        current: -1,
        categoryId: '',
        currentPage: 1
      },
      isDownloadBkb: false,
      currentDownload:{}
       };
  },
  created() {

    this.handleCurrentChange(1);
},
methods: {
  share(i,item){
      this.isShare = true
      this.itemId = item.id
    },

  goPlay(i,item){
    this.$router.push('/courseView?bid=' + item.id);
  },
  shareLiqr(){
    this.$api('resources.share', { id: this.itemId, type: this.group_id }).then(res => {
      this.isShare = false
      if (res.code == 1) {
        this.$message.success(res.msg);
      } else if (res.code == 0) {
        this.$message({
          message: res.msg,
          type: 'warning'
        });
      }
    });
  },
  downloadInfo(index, item) {
    this.isDownloadBkb = true;
    this.currentDownload = item;
  },
  editInfo(index, item) {
    this.$router.push('/lessonsadd?bid=' + item.id);
  },
  delInfo(index, item) {
    this.$confirm('确定要删除  ?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        this.$api('resources.delShare', { id: item.id }).then(res => {
          if (res.code == 1) {
            this.$message.success(res.msg);
            this.form = {};
            this.handleCurrentChange(1);
          } else if (res.code == 0) {
            this.$message({
              message: res.msg,
              type: 'warning'
            });
          }
        });
      })
      .catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
  },
  getYunList() {
    this.$api('cloud.room', { cid: this.cid }).then(res => {
      this.listYunData = res.data.data;
      this.yun.total = res.data.last_page;
    });
  },
  getCatList(type, index, page = 1, keyword) {
    if (page == 1) {
      this.currentPage = 1;
    } else if (page == this.total) {
      this.currentPage = this.total;
    }
    this.page = page
    this.type = type;
    this.current = index;
    this.keyword = keyword;

    let all_form = {
      user: 1,
      page: this.page,
      limit: this.page_size,
      type: this.type,
      keyword: this.keyword
    };
    this.$api('resources.getShareList', all_form).then(res => {
      this.listData = res.data.data;
      this.total = res.data.last_page;
    });
  },
  handleCurrentChange(page) {
    console.log(page);
    this.currentPage = page;
    this.getCatList(this.type, this.current, page, this.keyword);
  },
  downloadLi(index,item){
    this.isDownloadBkb = true;
    this.currentDownload = item;
  },

    goBack(){
      this.$router.go(-1);
    },
    goLessonsAdd(){
      this.$router.push("/lessonsAdd");
    },
    goLessons(){
      this.$router.push("/lessonsList");
    },
    goRes(){
      this.$router.push("/courseList");
    },
    goBkb2(){
      this.$router.push("/bkblist2");
    },
    goHome() {
		  this.$router.push(localStorage.getItem('jump_path'));
      // if( localStorage.getItem('jump_path') == '/index' ){
      //   this.$router.push('/index');
      // }else if( localStorage.getItem('jump_path') == '/lecture' ){
      //   this.$router.push('/lecture');
      // }else if( localStorage.getItem('jump_path') == '/train' ){
      //   this.$router.push('/train');
      // }
    }
  },
  components:{Header}
};
</script>

<style lang="scss" scoped>
/deep/ .el-input__inner {
  height: 36px;
  line-height: 35px;
  outline: 0;
}
</style>
